<template>
  <section id="section">
    <div v-if="noArticle" class="nomedrecord">
      <p style="height:90px;line-height:90px;font-size: 14px;font-weight: bold;color: gray;"></p>
      <img src="../../assets/pic.png" alt="" width="200px">
    </div>
    <div v-else style="padding-top: 20px;" v-for="item in articlelist" @click="articledetial(item)">
      <div class="card">
        <div class="content">
          <img :src="img" alt="">
          <div class="txt">
            <p class="p1">{{item.Title}}</p>
            <p class="p2">作者：{{item.Author}}</p>
            <p class="p3">{{setNum(item.CreateTime)}}</p>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

<script>
  import { Indicator } from "mint-ui";
  import {getUserArticle} from "../../api/api"
  export default {
    props: [],
    name: 'app',
    data(){
      return {
        noArticle:false,
        img:"https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2425063166,1413401402&fm=26&gp=0.jpg",
        articlelist:[],
      }
    },
    computed: {},
    components: {},
    created(){
    },
    methods: {
      articledetial(Content){
        console.log(Content);
        this.$router.push(
          {
            name:"文章详情",
            params:{
                content:Content,
                shoucang:true,
            }
          }

        );
      },
      getArticleList(){
        getUserArticle(JSON.parse(localStorage.getItem("user")).Id).then(res=>{
          this.articlelist=res.data.Result;
          if(this.articlelist.length>0){
            this.noArticle=false;
          }
          else{
            this.noArticle=true;
          }
        });

      },
      setNum(item) {
        if (item) {
          return item.slice(0, 10);
        }
      },
    },
    mounted() {
      this.getArticleList();
      document.getElementById("section").style.minHeight=localStorage.getItem("windowHeight")+"px";
    },
    destroyed(){
    }
  }
</script>

<style lang="scss" scoped>
  #section{
    background-color: rgba(220, 220, 220, 0.2);
  }
  .card{
    width:95%;
    margin: 0 auto;
    overflow: hidden;
    .date{
      width:100%;
      height: 40px;
      background-image: url("../../assets/blue.png");
      background-size: auto 40px;
      font-size: 20px;
      color: white;
      letter-spacing: 3px;
      line-height: 40px;
      text-align: left;
      padding-left: 25px;
    }
    .content {
      width: 90%;
      height: 120px;
      border-radius: 5px;
      background-color: white;
      padding-left: 5%;
      padding-right: 5%;
      img {
        width:30%;
        height: 100px;
        border-radius: 5px;
        float: left;
        vertical-align: middle;
        margin-top: 10px;
        margin-right: 2%;
      }
      .txt{
        width: 65%;
        height: 100px;
        float: right;
        margin-top: 10px;
        .p1{
          width: 100%;
          height: 40px;
          text-align: left;
          font-size: 16px;
          line-height:40px;
        }
        .p2{
          width: 100%;
          height: 40px;
          line-height:17.5px;
          overflow:hidden;
          text-overflow:ellipsis;
          display:-webkit-box;
          -webkit-box-orient:vertical;
          -webkit-line-clamp:3;
          font-size: 13px;
          color: gray;
          text-align: left;
        }
        .p3{
          width: 100%;
          height: 30px;
          text-align: left;
          font-size: 13px;
          color: #525252;
        }
      }
    }
  }

</style>
